<template>
	<view class="content-header">
		<view class="header" v-if="orderInfo!=null">
			<view class="goods">
				<view class="goods-top">
					<view class="goods-title">换货商品</view>
					<view class="goods-detail">
						<view class="goods-one flex-row flex-content-between" v-for="good in orderInfo.orderitem">
							<view class="flex-row">
								<image class="good-img" :src="$utils.cdnImg(good.image)" mode="scaleToFill"></image>
								<view class="goods-right flex-column">
									<view class="goods-detal-txt1">{{good.title}}</view>
									<view class="tags flex-row">
										<view v-for="tag in good.tags">{{tag.title}}</view>
									</view>
									<view class="goods-detal-txt3">￥{{good.price}}</view>
								</view>
							</view>
							<view class="flex-column-reverse">
								<view>x{{good.num}}</view>
							</view>
						</view>
						
						
					</view>
				</view>
				
			</view>
			<view class="type">
				<view class="flex-row flex-content-between type-top" @tap="showTypes">
					<view class="type-1">
						选择类型
					</view>
					<view class="flex-row flex-item-center" v-if="reTypeList.length>0">
						<view class="type-2">{{reTypeList[selected].title?reTypeList[selected].title:``}}</view>
						<image class="type-img" src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
					
				</view>
			</view>
			<view class="detail">
				<view class="detail-top">
					<view class="flex-row flex-content-between detail-txt">
						<view>换货描述和凭证</view>
						<view>您还可以输入{{textnum}}字</view>
					</view>
					<view class="detail-input">
						<textarea class="textarea" v-model="reason" placeholder="请描述换货原因并上传照片凭证" placeholder-class="inoput-p" @input="shuru" maxlength="400"></textarea>
						<view class="xuxian flex-row flex-wrap-no">
							<view class="a-img" v-for="(img,index) in imgs">
								<image class="xiangji" :src="$utils.cdnImg(img)" mode="scaleToFill"></image>
								<image class="del" @tap="deleteImg(index)" src="@/static/del.png" mode="scaleToFill"></image>
							</view>
							<image @tap="upfile" v-show="show_up" class="xiangji" src="../../static/user/xiangji.png" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="guizhe">退换货规则内容退换货规则内容退换货规则内容退换货规则内容</view>
			<view class="flex-column flex-item-center">
				<view class="anniu" @tap="submit">提交</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="tk">
				<view class="tk-haader flex-row flex-content-between">
					<view>选择类型</view>
					<image @tap="closeTypes" src="../../static/order/x.png" mode="scaleToFill"></image>
				</view>
				<view class="flex-column xuanz">
					<view class="flex-row flex-content-between types" v-for="(ty,indexs) in reTypeList" @tap="changeType(indexs)">
						<view>{{ty.title}}</view>
						<image v-if="reTypeList!=null&&ty.id==reTypeList[selected].id" src="../../static/bank/gou.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				order_num:"",//订单号
				orderInfo:null,//订单详情
				selected:0,//选择的售后类型
				textnum:400,//剩余可输入字符
				show_up:true,//可键上传图片
				imgs:[],
				reason:"",//退款原因
				reTypeList:[
					// {
					// 	id:"20",
					// 	name:"换货"
					// },
					// {
					// 	id:"30",
					// 	name:"退货退款"
					// },
					// {
					// 	id:"10",
					// 	name:"仅退款"
					// },
				],
				message:"",
				imgs:[
				],
			}
		},
		onLoad(opt) {
			if(opt.order_num){
				this.order_num = opt.order_num
			}
			if(opt.title){
				uni.setNavigationBarTitle({
					title:opt.title
				})
			}
			this.getOrderInfo();
			this.getRefundType();
		},
		methods:{
			//获取退款类型
			getRefundType(){
				let that = this
				this.$api.getRefundType().then(res=>{
					console.log(res);
					that.reTypeList = res;
				})
			},
			deleteImg(index){
				let imgs = this.imgs
				let newimg = [];
				imgs.forEach((it,ind)=>{
					if(ind!=index){
						newimg.push(it)
					}
				})
				if(newimg<3){
					this.show_up = true
				}
				this.imgs = newimg;
			},
			//上传文件
			upfile(){
				let that = this;
				let imgs = this.imgs;
				this.$utils.UploadImages("/api/common/upload",(res)=>{
					console.log(res);
					if(res){
						res = JSON.parse(res)
						// console.log(res);
						if(res.code==1){
							that.imgs.push(res.data.url)
							if(that.imgs.length>=3){
								that.show_up = false;
							}
						}
					}
				})
			},
			//修改类型
			changeType(index){
				this.selected = index;
				this.$refs.popup.close()
				console.log(this.selected);
			},
			//关闭选择类型弹框
			closeTypes(){
				this.$refs.popup.close();
			},
			//弹框选择类型
			showTypes(){
				this.$refs.popup.open();
			},
			//提交数据
			submit(){
				let reTypeList = this.reTypeList
				let selected = this.selected;
				let data = {
					order_id:this.orderInfo.id,
					order_num:this.orderInfo.order_num,
					reason:this.reason,
					images:this.imgs.join(','),
					refund_type_id:reTypeList[selected].id,
				}
				let that = this
				this.$api.refundOrder(data).then(res=>{
					that.$store.dispatch("getOrderList")
					that.$store.dispatch("getOrderStatus")
					that.$utils.showMessage("申请成功",()=>{
						uni.navigateBack();
					})
				})
			},
			//计算可输入字符
			shuru(){
				// console.log(this.message);
				if(this.reason.length==0){
					this.textnum = 400
				}else{
					this.textnum = 400-this.reason.length
				}
			},
			//获取订单详情
			getOrderInfo(){
				let data = {
					order_num:this.order_num
				}
				let that = this;
				this.$api.getOrderInfo(data).then(res=>{
					console.log(res);
					that.orderInfo = res;
				})
			}
		}
	}
</script>

<style lang="scss">
	.del{
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
	}
	.a-img{
		// background-color: red;
		margin-left: 5rpx;
		margin-right: 5rpx;
		position: relative;
	}
	.xuanz{
		width: 690rpx;
		margin-left: 30rpx;
	}
	.types{
		margin-top: 63rpx;
		>view{
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>image{
			width: 36rpx;
			height: 30rpx;
		}
	}
	.tk-haader{
		width: 690rpx;
		// height: 156rpx;
		border-bottom: 1rpx solid #EEEEEE;
		margin-left: 30rpx;
		padding-top: 54rpx;
		padding-bottom: 54rpx;
		>image{
			width: 28rpx;
			height: 28rpx;
			margin-right: 24rpx;
		}
		>view:nth-child(1){
			margin-left: 237rpx;
		}
	}
	.tk{
		width: 750rpx;
		height: 725rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
		opacity: 1;
	}
	.anniu{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45px 45px 45px 45px;
		opacity: 1;
		margin-top: 300rpx;
		text-align: center;
		line-height: 90rpx;
		color: $default-button-foncolor;
	}
	.guizhe{
		width: 690rpx;
		// height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 20rpx;
		letter-spacing:0rpx;
	}
	.xiangji{
		width: 104rpx;
		height: 104rpx;
		// margin-top: 10rpx;
	}
	.xuxian{
		// width: 104rpx;
		height: 104rpx;
		// border: 1rpx dashed #999999;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}
	.inoput-p{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.textarea{
		height: 184rpx;
		font-size: 24rpx;
		// width: 650rpx;
		// background-color: #333333;
		// color: #FF5000;
		padding: 20rpx;
	}
	.detail-input{
		width: 650rpx;
		// height: 328rpx;
		background: #F4F4F4;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 1;
		// margin-left: 20rpx;
		margin-top: 21rpx;
		padding-bottom: 20rpx;
	}
	.detail-txt{
		height: 28rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 23rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 28rpx;
		}
	}
	.detail-top{
		padding-top: 19rpx;
		margin-left: 20rpx;
		margin-right: 28rpx;
		padding-bottom: 20rpx;
	}
	.detail{
		width: 690rpx;
		// height: 428rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-top: 20rpx;
	}
	.type-1{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.type-2{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666666;
	}
	.type-top{
		padding-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
		padding-bottom: 20rpx;
	}
	.type-img{
		width: 14rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
	.type{
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-top: 20rpx;
	}
	.tags{
		height: 40rpx;
		margin-top: 10rpx;
		>view{
			height: 38rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 1px solid #FF5000;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF5000;
			padding-left: 10rpx;
			padding-right: 10rpx;
			margin-right: 5rpx;
			margin-top: 10rpx;
		}
	}
	.goods-detal-txt1{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.goods-detal-txt3{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 38rpx;
	}
	.goods-right{
		margin-left: 20rpx;
	}
	.good-img{
		width: 172rpx;
		height: 172rpx;
	}
	.goods-title{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.goods-detail{
		margin-top: 20rpx;
	}
	.goods-one{
		margin-bottom: 20rpx;
	}
	.goods-top{
		padding-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 32rpx;
		padding-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.goods{
		width: 690rpx;
		// height: 282px;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
	}
	.header{
		width: 690rpx;
		margin-left: 30rpx;
	}
</style>